<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <!-- <h3 style="text-align: center">紧固件库</h3> -->
  <el-form ref="queryFormRef" :model="queryParams" :inline="true" size="small" label-width="80">
    <el-form-item label="库类型" prop="modelType">
      <el-select v-model="queryParams.modelType" style="width: 150px" @change="handleQuery()"> 
        <el-option v-for="item in modelTypeList" :key="item.id" :label="item.name" :value="item.id">  
        </el-option>
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="业务场景" prop="businessSceneType">
      <el-select v-model="queryParams.businessSceneType" style="width: 150px">  
        <el-option v-for="item in businessSceneList" :key="item.value" :label="item.label" :value="item.value">  
        </el-option>
      </el-select>
    </el-form-item> -->
    <el-form-item label="创建时间">
      <el-date-picker
      style="width: 240px"
        v-model="queryParams.dateRangeCreateTime"
        value-format="YYYY-MM-DD HH:mm:ss"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
      ></el-date-picker>
    </el-form-item>
    <el-form-item style="padding-left: 80px">
      <el-button size="small" type="primary" icon="search" @click="handleQuery">查询</el-button>
      <el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
  <div v-if="chartLineShow" id="timeRangeChart" style="width: 100%;height: 300px;"></div>
</template>

<script setup>
// import * as VChart from '@visactor/vchart'; statisticalAnalysis
import VChart from '@visactor/vchart';
import { getModelTimeStatistics, getCaseTimeStatistics, getLayupStatistics, getMaterialTimeStatistics, getAlgorithmTimeStatistics } from '@/api/statisticalAnalysis';
const CONTAINER_ID = ref('timeRangeChart');
const modelTypeList = ref([{
  name: '模型库',
  id: 1,
},
// {
//   name: '材料库',
//   id: 2,
// },
// {
//   name: '紧固件库',
//   id: 3,
// },
{
  name: '算例库',
  id: 4,
},
// {
//   name: '结果库',
//   id: 5,
// },
{
  name: '铺层库',
  id: 6,
},
{
  name: '型材库',
  id: 7,
},
{
  name: '算法库',
  id: 8,
}
]);
const queryParams = ref({
  modelType: '',
  businessSceneType: '',
  dateRangeCreateTime: []
}); 
const businessSceneList = ref([{
  label: '结构ACE',
  value: '1'
}, {
  label: '参数化建模',  
  value: '2'
}]);
const chartData = ref([]);
const chartLineShow = ref(false);
const renderChart = async () => {
  chartLineShow.value = true;
  await nextTick();
  let spec = queryParams.value.modelType == 8 ? {
    type: 'common',
    data: [
      {
        id: 'scatter',
        values: chartData.value
      }
    ],
    series: [
      {
        type: 'scatter',
        xField: 'time',
        yField: 'totalCount',
        seriesField: 'title',
        stack: true
      }
    ],
    axes: [
      {
        orient: 'bottom',
        domainLine: {
          onZero: true,
          style: {
            stroke: '#212121'
          }
        },
        title: {
          visible: true,
          text: '月份'
        }
      },
      {
        orient: 'left',
        domainLine: {
          visible: false
        },
        title: {
          visible: true,
          text: '算法库类型堆叠散点'
        },
        grid: {
          style: {
            lineDash: [0]
          }
        },
        tick: {
          inside: true,
          tickStep: 10
        }
      }
    ],
    tooltip: {
      dimension: { visible: false }
    }
  } : {
    type: 'line',
    data: {
      values:  chartData.value,
    },
    title: {
      visible: true,
      text: '要素库数据增长趋势'
    },
    stack: true,
    xField: 'time',
    yField: 'totalCount',
    seriesField: 'title',
    lineLabel: { visible: true },
    legends: [{ visible: true, position: 'middle', orient: 'bottom' }]
  };

  const vchart = new VChart(spec, { dom: CONTAINER_ID.value });
  vchart.renderSync();
  window['vchart'] = vchart;
}


const handleQuery = async (val) => {
  chartLineShow.value = false;
  await searchDataByType(val);
  renderChart();
}
const searchDataByType = async (type) => {
  if (queryParams.value.dateRangeCreateTime && queryParams.value.dateRangeCreateTime.length > 0) {
    const startTime = queryParams.value.dateRangeCreateTime[0];
    const endTime = queryParams.value.dateRangeCreateTime[1];
    switch (queryParams.value.modelType) {
      case 1:
        // model_type  model_series source_methods model_scope load_conditions business_scenarios
        await getModelTimeStatistics('model_type', startTime, endTime).then(res => {
          chartData.value = res.data;
        })
        break;
      case 4:
        await getCaseTimeStatistics('analysis_type', startTime, endTime).then(res => {
          chartData.value = res.data;
        })
        break;
      case 6:
        await getLayupStatistics(startTime, endTime).then(res => {
          chartData.value = res.data;
        })        
        break;      
      case 7:
        await getMaterialTimeStatistics('type', startTime, endTime).then(res => {
          chartData.value = res.data;
        })        
        break;   
      case 8:
        await getAlgorithmTimeStatistics('application_type', startTime, endTime).then(res => {
          chartData.value = res.data;
        })        
        break;
    }
  } 
}                                                                                     
const resetQuery = () => {
  queryParams.modelType = [];
  queryParams.dateRangeCreateTime = [];
  renderChart();  
}

onMounted(() => {
  searchDataByType();
  renderChart();                           
});                                                                                   
                                                         
</script>

<style lang="scss" scoped>

</style>